<template>
  <div class="editStore">
    <el-form :inline="true" :model="productForm" ref="productForm" class="form-inline">
      <el-form-item label="店铺名称">
        <el-input v-model="productForm.storeName"></el-input>
      </el-form-item><br />
      <el-form-item label="店铺类型">
        <span>{{productForm.storeBusinessType}}</span>
      </el-form-item><br />
      <el-form-item label="销售渠道">
        <span>{{productForm.storeType}}</span>
      </el-form-item><br />
       <el-form-item label="品牌">
        <span class="spanpd" v-for="cateItem in productForm.categorySysnoList">{{cateItem}}</span><el-button icon="el-icon-plus" size="small" @click="addBrand">添加品牌</el-button>
      </el-form-item><br />
      <el-form-item label="店铺客服电话">
        <el-input v-model="productForm.storeTelephone"></el-input>
      </el-form-item><br />
       <el-form-item label="品类">
        <el-checkbox-group v-model="categorySysnoList">
          <el-checkbox v-for="queryItem in queryLists" :label="queryItem" name="brandItem">{{queryItem.categoryName}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item><br />
      <el-form-item label="是否自营">
        <span>{{productForm.selfSupport}}</span>
      </el-form-item><br />
      <el-form-item>
        <el-button type="primary" @click="editSubmit">确认</el-button>
        <el-button @click="cancelBtn">取 消</el-button>
      </el-form-item>
      <el-dialog
        title="添加品牌"
        :visible.sync="dialogVisible"
        size="tiny"
        :before-close="handleClose">
        <span>已添加品牌不支持删除，需在品牌设置中操作</span>
        <div>
          <el-checkbox-group v-model="storeBannerIdList">
            <el-checkbox v-for="brandItem in brandLists" :label="brandItem" name="brandItem.brandName">{{brandItem.brandName}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
    <div class="">
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {mapGetters, mapActions} from 'vuex'
  export default{
    name: 'editStore',
    data () {
      return {
        datails: {},
        productForm: {
          storeBusinessType: '',
          storeType: '',
          storeTelephone: '',
          selfSupport: '',
          storeName: '',
          categorySysnoList: [],
          categorySysno: ''
        },
        changeForm: {
          storeSysno: this.$route.params.id,
          storeName: '',
          storeBannerId: '',
          categorySysno: '',
          storeTelephone: ''
        },
        storeBusinessType: '',
        categorySysnoList: [],
        storeBannerIdList: [],
        brandLists: {},
        dialogVisible: false,
        queryLists: []
      }
    },
    computed: {
      // 映射State
      ...mapGetters([
        'apiUrl'
      ])
    },
    methods: {
      ...mapActions([
        'getStorage'
      ]),
      editSubmit () {
        this.storeBannerIdList.forEach((item, key) => {
          this.changeForm.storeBannerId += item.brandId + ','
        })
        this.categorySysnoList.forEach((item, key) => {
          this.changeForm.categorySysno += item.categorySysno + ','
        })
        this.changeForm.storeName = this.productForm.storeName
        this.changeForm.storeTelephone = this.productForm.storeTelephone
        this.storeBannerIdList.forEach((item, key) => {
          this.changeForm.storeBannerId += item.brandId + ','
        })
        var params = {}
        if (this.changeForm.categorySysno === '' && this.changeForm.storeBannerId !== '') {
          params = {
            storeSysno: this.$route.params.id,
            storeName: this.changeForm.storeName,
            storeBannerId: this.changeForm.storeBannerId,
            storeTelephone: this.changeForm.storeTelephone
          }
        } else if (this.changeForm.storeBannerId === '' && this.changeForm.categorySysno !== '') {
          params = {
            storeSysno: this.$route.params.id,
            storeName: this.changeForm.storeName,
            categorySysno: this.changeForm.categorySysno,
            storeTelephone: this.changeForm.storeTelephone
          }
        } else if (this.changeForm.categorySysno === '' && this.changeForm.storeBannerId === '') {
          params = {
            storeSysno: this.$route.params.id,
            storeName: this.changeForm.storeName,
            storeTelephone: this.changeForm.storeTelephone
          }
        } else {
          params = {
            storeSysno: this.$route.params.id,
            storeName: this.changeForm.storeName,
            storeBannerId: this.changeForm.storeBannerId,
            categorySysno: this.changeForm.categorySysno,
            storeTelephone: this.changeForm.storeTelephone
          }
        }
        axios.post('/api/shop/editShop', params).then((res) => {
          if (res.data.code === 9999) {
            this.$message({
              type: 'success',
              message: '编辑成功'
            })
            this.$router.push('/storeInfo/' + this.$route.params.id)
          }
        })
      },
      addBrand () {
        axios.post('/api/shop/queryBrandList', {token: this.erpToken}).then((res) => {
          if (res.data.code === 9999) {
            this.brandLists = res.data.data
            this.dialogVisible = true
          }
        })
      },
      cancelBtn () {
        this.$router.push('/storeInfo/' + this.$route.params.id)
      }
    },
    mounted () {
      axios.post('/api/shop/queryShopDetail', {storeSysno: this.$route.params.id}).then((res) => {
        if (res.data.code === 9999) {
          this.details = res.data.data
          this.storeBusinessType = this.details.storeBusinessType
          if (this.details.storeBusinessType === 10) {
            this.productForm.storeBusinessType = '奢品'
          } else {
            this.productForm.storeBusinessType = '餐饮'
          }
          if (this.details.storeType === 0) {
            this.productForm.storeType = '线下店铺'
          } else {
            this.productForm.storeType = '线上店铺'
          }
          this.productForm.storeBannerId = this.details.storeBannerId
          this.productForm.storeName = this.details.storeName
          this.productForm.storeTelephone = this.details.storeTelephone
          this.productForm.categorySysno = this.details.categorySysno
          this.productForm.categorySysnoList = this.details.storeBannerId.split(',')
          if (this.details.selfSupport === 0) {
            this.productForm.selfSupport = '自营'
          } else {
            this.productForm.selfSupport = '非自营'
          }
          // console.log(11111111)
          // console.log(this.productForm.categorySysno)
          // this.queryLists.forEach((item, key) => {
          //   if (item.categoryName === this.details.categorySysno) {
          //     this.categorySysnoList.push(item.categoryName)
          //   }
          // })
          // console.log(this.categorySysnoList)
          axios.post('/api/shop/querylevelTwoCategoryList', {type: this.storeBusinessType}).then((res) => {
            if (res.data.code === 9999) {
              this.queryLists = res.data.data
            }
          })
        }
      })
      this.getStorage('erpToken').then((erpToken) => {
        this.erpToken = erpToken.replace(/"/g, '')
      }, function (error) {
        console.log(error)
      })
    }
  }
</script>
<style scoped lang='less'>
  .editStore{
    text-align:center;
    margin-top:100px;
    .spanpd{
      padding:0 10px;
    }
    .el-dialog--tiny{
      width: 50%;
    }
  }
</style>
